<template>
<div class="page-school fc">
  <div class="header fr">
    <div class="f1 fr">
      <div class="item fr ac mt-20">
        <img src="../../../assets/img/p：：圆角矩形 1226 拷贝@2x.png" style="width: 32px;">
        <span>{{dateTime}}</span>
      </div>
      <div class="item fr ac mt-20">
        <img src="../../../assets/img/学生@2x.png" style="width: 24px;">
        <span>学生 {{school.studentcount | num}}人</span>
      </div>
      <div class="item fr ac mt-20">
        <img src="../../../assets/img/w_黑板1@2x.png" style="width: 30px;">
        <span>班级 {{school.classescount | num}}个</span>
      </div>
    </div>
    <div class="f2 fajc text">校园体温监测动态感知大数据平台</div>
    <div class="f1 fr">
      <div class="f1"></div>
      <div class="item fr ac mt-20">
        <img src="../../../assets/img/face 人脸识别@2x.png" style="width: 30px;">
        <span>测温卡点 {{school.stuckcount | num}}</span>
      </div>
      <div class="item fr ac mt-20">
        <img src="../../../assets/img/ren@2x.png" style="width: 28px;">
        <span>{{school.schoolname}}</span>
      </div>
      <div class="btn a mt-20"></div>
      <div class="btn a mt-20" @click="fullScreen"></div>
    </div>
  </div>
  <div class="top-info first fr ac pr">
    <div class="f1 fr ac"><i class="icon icon_1"></i>风险等级: {{info.risk}}</div>
    <div class="divider"></div>
    <div class="f1 fr ac"><i class="icon icon_2"></i>累计测温人数: {{info.test | num}}</div>
    <div class="divider"></div>
    <div class="f1 fr ac"><i class="icon icon_3"></i>确诊人数: {{info.diagnose | num}}</div>
    <div class="divider"></div>
    <div class="f1 fr ac"><i class="icon icon_4"></i>疑似人数: {{info.suspected | num}}</div>
    <div class="divider"></div>
    <div class="f1 fr ac"><i class="icon icon_5"></i>康复人数: {{info.recover | num}}</div>
    <div class="corner lt"></div>
    <div class="corner rt"></div>
    <div class="corner rb"></div>
    <div class="corner lb"></div>
    <div class="light t"></div>
    <div class="light r"></div>
    <div class="light b"></div>
    <div class="light l"></div>
  </div>
  <div class="top-info last fr ac pr">
    <div class="f1 fr ac"><i class="icon icon_6"></i>医疗隔离: {{info.medical | num}}</div>
    <div class="divider"></div>
    <div class="f1 fr ac"><i class="icon icon_7"></i>居家隔离: {{info.home | num}}</div>
    <div class="divider"></div>
    <div class="f1 fr ac"><i class="icon icon_8"></i>停课班级: {{info.stop | num}}</div>
    <div class="divider"></div>
    <div class="f1 fr ac"><i class="icon icon_9"></i>复课班级: {{info.start | num}}</div>
    <div class="divider"></div>
    <div class="f1 fr ac"><i class="icon icon_10"></i>消杀次数: {{info.germicidal | num}}</div>
    <div class="corner lt"></div>
    <div class="corner rt"></div>
    <div class="corner rb"></div>
    <div class="corner lb"></div>
    <div class="light t"></div>
    <div class="light r"></div>
    <div class="light b"></div>
    <div class="light l"></div>
  </div>
  <div v-if="inited" class="fr jsb ml-40 mr-40 mb-36">
    <com-class-bar :chart-data="diagnose"/>
    <div class="fc jsb">
      <com-diagnosis-line :chart-data="trends.diagnosis"/>
      <com-test-bar :chart-data="trends.test"/>
      <div class="fr jsb">
        <com-suspected-line :chart-data="trends.suspected"/>
        <com-nucleic-line :chart-data="trends.nucleic"/>
      </div>
    </div>
    <div class="fc jsb">
      <com-school-pie :chart-data="people"/>
      <com-school-bar :chart-data="people"/>
      <com-recover-line :chart-data="trends.recover"/>
    </div>
  </div>
  <div v-if="inited" class="fr jsb ml-40 mr-40">
    <com-class-pie :chart-data="diagnosePie"/>
    <com-medical-line :chart-data="trends.medical"/>
    <com-home-line :chart-data="trends.home"/>
    <com-class-line :chart-data="lessons"/>
  </div>
</div>
</template>

<script>
import moment from 'moment'
import gsap from 'gsap'
import comClassBar from './components/com-class-bar'
import comDiagnosisLine from './components/com-diagnosis-line'
import comTestBar from './components/com-test-bar'
import comSuspectedLine from './components/com-suspected-line'
import comNucleicLine from './components/com-nucleic-line'
import comSchoolPie from './components/com-school-pie'
import comSchoolBar from './components/com-school-bar'
import comRecoverLine from './components/com-recover-line'
import comClassPie from './components/com-class-pie'
import comMedicalLine from './components/com-medical-line'
import comHomeLine from './components/com-home-line'
import comClassLine from './components/com-class-line'

export default {
  name: 'page-school',
  components: {
    comClassBar,
    comDiagnosisLine,
    comTestBar,
    comSuspectedLine,
    comNucleicLine,
    comSchoolPie,
    comSchoolBar,
    comRecoverLine,
    comClassPie,
    comMedicalLine,
    comHomeLine,
    comClassLine
  },
  data () {
    return {
      inited: false,
      timer: null,
      trendTimer: null,
      diagnoseTimer: null,
      dateTime: '',
      school: {
        studentcount: 0,
        classescount: 0,
        stuckcount: 0,
        schoolname: ''
      },
      info: {
        risk: '',
        test: 0,
        diagnose: 0,
        suspected: 0,
        recover: 0,
        medical: 0,
        home: 0,
        stop: 0,
        start: 0,
        germicidal: 0
      },
      diagnose: [],
      diagnosePie: [],
      trends: {
        diagnosis: [],
        test: [],
        suspected: [],
        nucleic: [],
        medical: [],
        home: [],
        recover: []
      },
      people: [],
      lessons: []
    }
  },
  methods: {
    getSchool () {
      return this.$http('/top/variousdata', { userid: `${this.$store.state.user.userid}` }).then(
        res => {
          const data = res.data || {}
          this.school = data
          gsap.to(this.school, {
            duration: 2,
            studentcount: data.studentcount || 0
          })
          this.school = data
          gsap.to(this.school, {
            duration: 2,
            classescount: data.classescount || 0
          })
          this.school = data
          gsap.to(this.school, {
            duration: 2,
            stuckcount: data.stuckcount || 0
          })
        }
      )
    },
    getInfo () {
      return this.$http('/health/healthInfoStatistics/getStatisticsDaping', { schoolno: this.$store.state.classinfo.schoolno, ranklevel: 4 }).then(
        res => {
          const keys = {
            test: '测温人数',
            diagnose: '确诊人数',
            suspected: '疑似人数',
            recover: '康复人数',
            medical: '医疗隔离',
            home: '居家隔离',
            stop: '停课班级',
            start: '复课班级',
            germicidal: '消杀次数'
          }
          const data = res.data || []
          for (const k in this.info) {
            if (k === '_gsap') continue
            else if (k === 'risk') this.info[k] = data[0].risklevel
            else {
              gsap.to(this.info, {
                duration: 2,
                [k]: data.find(v => v.text === keys[k]).count || 0
              })
            }
          }
        }
      )
    },
    getDiagnose () {
      return this.$http('/health/healthInfoStatistics/getquezheng', { schoolno: this.$store.state.classinfo.schoolno, ranklevel: 4 }).then(
        res => {
          this.diagnose = res.data || []
          this.diagnosePie = [...this.diagnose]
        }
      )
    },
    getTrends () {
      const types = [13, 1, 14, 12, 5, 7, 15]
      return Promise.all(types.map(v => this.$http('/health/healthInfoStatistics/getTrends', {
        ranklevel: 4,
        schoolno: this.$store.state.classinfo.schoolno,
        isdate: 0,
        istoday: 0,
        begintime: moment().subtract(30, 'days').format('YYYY-MM-DD'),
        endtime: moment().format('YYYY-MM-DD'),
        statisticstype: v
      }))).then(
        ([diagnosis, test, suspected, nucleic, medical, home, recover]) => {
          const trends = {
            diagnosis: diagnosis.data || [],
            test: test.data || [],
            suspected: suspected.data || [],
            nucleic: nucleic.data || [],
            medical: medical.data || [],
            home: home.data || [],
            recover: recover.data || []
          }

          const _trends = {
            diagnosis: [],
            test: [],
            suspected: [],
            nucleic: [],
            medical: [],
            home: [],
            recover: []
          }

          for (let i = 27;i >= 0;i--) {
            const date = moment().subtract(i, 'days').format('YYYY-MM-DD')
            const _date = moment(date).format('MM/DD')

            for (const k in trends) {
              const list = _trends[k]
              const item = trends[k].find(v => v.unitime === date)
              if (item) {
                item.date = _date
                list.push(item)
              } else list.push({ date: _date, count: 0 })
            }
          }
          _trends.suspected = _trends.suspected.splice(13, 14)
          _trends.nucleic = _trends.nucleic.splice(13, 14)
          _trends.medical = _trends.medical.splice(13, 14)
          _trends.home = _trends.home.splice(13, 14)
          _trends.recover = _trends.recover.splice(13, 14)
          this.trends = _trends
        }
      )
    },
    getPeople () {
      return this.$http('/health/healthInfoStatistics/getzhanbixuexiao', { ranklevel: 4, schoolno: this.$store.state.classinfo.schoolno }).then(
        res => {
          this.people = res.data || []
        }
      )
    },
    getLessons () {
      return this.$http('/health/healthInfoStatistics/gettwoTrends', { ranklevel: 4, schoolno: 87485 }).then(
        res => {
          const data = res.data || []
          const list = []
          for (let i = 13;i >= 0;i--) {
            const date = moment().subtract(i, 'days').format('YYYY-MM-DD')
            const _date = moment(date).format('MM/DD')

            const item = data.find(v => v.textname === date)
            if (item) {
              item.date = _date
              item.jinricount = item.jinricount || 0
              item.leijicount = item.leijicount || 0
              list.push(item)
            } else list.push({ date: _date, jinricount: 0, leijicount: 0 })
          }
          this.lessons = list
        }
      )
    },
    fullScreen () {
      const isFullscreen = document.fullscreenElement
      if (!isFullscreen) {
        document.documentElement.requestFullscreen()
      } else {
        document.exitFullscreen()
      }
    },
    async setDiagnoseTimer () {
      await this.getDiagnose()
      let num = this.diagnose.length

      this.diagnoseTimer = setInterval(() => {
        this.diagnose.push(this.diagnose.shift())
        num--
        if (num === 0) {
          clearInterval(this.diagnoseTimer)
          this.setDiagnoseTimer()
        }
      }, 2000)
    },
    async setTimer () {
      let num = 28
      await this.getSchool()
      await this.getInfo()
      await this.getTrends()
      await this.getPeople()
      await this.getLessons()

      this.trendTimer = setInterval(() => {
        Object.values(this.trends).forEach(v => {
          v.push(v.shift())
        })
        this.lessons.push(this.lessons.shift())
        num--
        if (num === 0) {
          clearInterval(this.trendTimer)
          this.setTimer()
        }
      }, 2000)
    }
  },
  async created () {
    this.dateTime = moment().format('YYYY-MM-DD HH:mm:ss')
    this.timer = setInterval(() => {
      this.dateTime = moment().format('YYYY-MM-DD HH:mm:ss')
    }, 1000)
    await this.setDiagnoseTimer()
    await this.setTimer()
    this.inited = true
  }
}
</script>

<style lang="less">
.page-school {width: 100%;height: 100%;line-height: 2em;
  .mb-36 {margin-bottom: 36px;}
  .header {height: 120px;padding: 0 42px;background: #0A1917 url("../../../assets/img/header_bg.png") top center/100% no-repeat;margin-bottom: 18px;color: #06FFFE;font-size: 32px;
    .item {font-family: PingFangSC-Regular;
      img {margin-right: 12px;}
      + .item {margin-left: 38px;}
      + .btn {margin-left: 74px;}
    }
    .text {font-size: 86px;font-family: PangMenZhengDao;color: #0BFFFE;}
    .btn {width: 32px;height: 32px;background: no-repeat center/100%;align-self: center;
      &:last-child {background-image: url("../../../assets/img/全屏@2x.png");}
      &:nth-last-child(2) {background-image: url("../../../assets/img/设置@2x.png");}
      + .btn {margin-left: 46px;}
    }
  }
  .top-info {height: 80px;background-color: #102526;font: bold 32px PingFangSC-Regular;color: #FFFFFF;position: relative;overflow: hidden;
    .icon {width: 60px;height: 44px;background: no-repeat center;margin-right: 18px;margin-left: 210px;
      &.icon_1 {background-image: url("../../../assets/img/p：：形状_1181@2x.png");background-size: 36px;}
      &.icon_2 {background-image: url("../../../assets/img/p：：形状_1213@2x.png");background-size: 60px 36px;}
      &.icon_3 {background-image: url("../../../assets/img/p：：形状_1213@2x(1).png");background-size: 36px 42px;}
      &.icon_4 {background-image: url("../../../assets/img/p：：形状_1214@2x.png");background-size: 36px;}
      &.icon_5 {background-image: url("../../../assets/img/p：：形状_1215@2x.png");background-size: 36px 44px;}
      &.icon_6 {background-image: url("../../../assets/img/p：：形状_1216@2x.png");background-size: 36px 42px;}
      &.icon_7 {background-image: url("../../../assets/img/p：：形状_1217@2x.png");background-size: 44px 36px;}
      &.icon_8 {background-image: url("../../../assets/img/p：：班级@2x.png");background-size: 44px 34px;}
      &.icon_9 {background-image: url("../../../assets/img/p：：形状_1220@2x.png");background-size: 36px;}
      &.icon_10 {background-image: url("../../../assets/img/p：：形状_1219@2x.png");background-size: 28px 38px;}
    }
    .divider {width: 2px;height: 32px;background-color: #FFFFFF;}
    .corner {position: absolute;width: 26px;height: 26px;border: 2px solid #1AFFF8;
      &.lt {border-right: 0;border-bottom: 0;left: 0;top: 0;}
      &.rt {border-left: 0;border-bottom: 0;right: 0;top: 0;}
      &.rb {border-left: 0;border-top: 0;right: 0;bottom: 0;}
      &.lb {border-right: 0;border-top: 0;left: 0;bottom: 0;}
    }
    .light {position: absolute;z-index: 2;
      &.t {top: 0;left: 0;width: 100%;height: 2px;background: linear-gradient(90deg,transparent,#1AFFF8);animation: lr 2s linear infinite;}
      &.r {top: -100%;right: 0;width: 2px;height: 100%;background: linear-gradient(180deg,transparent,#1AFFF8);animation: tb 2s linear infinite;animation-delay: .5s;}
      &.b {bottom: 0;right: 0;width: 100%;height: 2px;background: linear-gradient(270deg,transparent,#1AFFF8);animation: rl 2s linear infinite;animation-delay: 1s;}
      &.l {bottom: -100%;left: 0;width: 2px;height: 100%;background: linear-gradient(360deg,transparent,#1AFFF8);animation: bt 2s linear infinite;animation-delay: 1.5s;}
    }
    &.first {margin: 18px 42px 26px;}
    &.last {margin: 0 42px 36px;}
  }
}

@keyframes lr{0%{left:-100%}50%,100%{left:100%}}
@keyframes tb{0%{top:-100%}50%,100%{top:100%}}
@keyframes rl{0%{right:-100%}50%,100%{right:100%}}
@keyframes bt{0%{bottom:-100%}50%,100%{bottom:100%} }
</style>
